<template>
  <div id="app">
    <p>{{ msg }}</p>
    <input type="text" v-model="msg" />
    <button @click="getData">获取数据</button>
  </div>
</template>

<script>
// MVVM:响应式系统的原理:
// 观察者模式-发布-订阅者模式
// Observer(数据劫持者):劫持数据的变化 Object.defineProperty()进行数据的劫持,监听数据发生变化后,通过Dep来通知订阅者
// Dep:添加订阅者,在数据发生变化时-通知订阅者
// Watcher(订阅者):记录了订阅者(插值,计算属性,侦听器等)watcher在接受数据变化的同时,让updater方法进行视图的更新
// complie(模板解析):解析tempplate模板,解析数据和相关的指令,绑定更新函数

// Observer(出版社-出版书籍):当出版(如何成为优秀程序员)第二版
// Dep(书店-读者订阅了书籍):书店得到消息后,通知读者
// Watcher(读者-订阅书籍):读者收到订阅书籍的通知--读书--长进知识的目的

export default {
  name: "App",
  components: {},
  // data:对象/函数在组件中只能是函数
  data() {
    return {
      msg: "Hello",
      arr: [1, 2, 3],
      obj: {
        name: "momoko",
      },
    };
  },
  methods: {
    getData() {
      console.log(this);
      console.log(this._data);
    },
  },
  // 局部过滤器
  filters: {},
  // 计算属性
  computed: {},

  watch: {},
};
</script>

<style>
</style>
